import React from "react";

class SclaceComponent extends React.Component {
  /**
   * 子组件不能改变props
   * 需要通知父组件去修改
   * @param {*} event
   */
  inputChange(event) {
    this.props.onChange &&
      this.props.onChange(event.target.value, this.props.unit);
  }

  render() {
    /**
     * 我们的组件存在多个组件公用一块状态的情况
     * 并且状态之间还存在关联，那么我们就可以把当前组件的
     * 通用状态提升到父级组件里面，通过父组件再给我们传过来使用
     */
    return (
      <div>
        <input
          onChange={(e) => this.inputChange(e)}
          value={this.props.num}
          type="number"
        />
        {this.props.unit}
      </div>
    );
  }
}

export default class LearnPromote extends React.Component {
  state = {
    /**
     * 这两个属性是子组件提升过来的
     */
    m: 0,
    cm: 0,
  };

  /**
   * 接收到子组件要修改状态的通知
   * 根据逻辑修改状态
   * @param {} value
   * @param {*} unit
   */
  inputChange = (value, unit) => {
    if (unit === "m") {
      /**
       * 最终使用setState改变state
       * 那么react组件会重新渲染
       * 数据也会重新下发下去
       * 所有的状态就保持了统一
       */
      this.setState({
        m: value,
        cm: value * 100,
      });
    } else {
      this.setState({
        cm: value,
        m: value / 100,
      });
    }
  };

  render() {
    return (
      <div>
        <h2>米和之间相互转换</h2>
        <SclaceComponent
          onChange={this.inputChange}
          // 属性名是一样 只是值不一样
          num={this.state.m}
          unit="m"
        ></SclaceComponent>
        <SclaceComponent
          onChange={this.inputChange}
          num={this.state.cm}
          unit="cm"
        ></SclaceComponent>
      </div>
    );
  }
}
